import Vue from 'vue'

//第1种方法
// new Vue({
//   // el的意思是 template 挂载到什么位置
//   // 把他替换掉，模板中这个位置就没了，变成新的
//   el: '#root',
//   template: '<div>hello vue</div>'
// })

//第2种方法
const app = new Vue({
  // ref 快速定位到一个组件 or 节点，
  // 1. 如果是个html 就返回html
  // 2. 如果是组件就返回组件的实例
  template: '<div ref="div">{{text}}{{obj.a}}</div>',
  data: {
    text: 0,
    obj: {}
  }

  // 监听函数，监听组件 text
  // 如果用 $watch 就需要自己注销掉
  // watch: {
  //   text (newText, oldText) {
  //     console.log(`${newText}: ${oldText}`)
  //   }
  // }
})

app.$mount('#root')
// app.text = 'text first'

let i = 0
//循环
setInterval(() => {
  i++
  // app.text += 1

  // 方法1：给属性肤质（不是reactive的）
  // app.obj.a = i
  // app.$forceUpdate()

  // 方法2：给属性赋值（声明为reactive的）
  app.$set(app.obj, 'a', i)

  // 删除属性
  // app.$delete(app.obj, 'a')

  // app.$options.data.text += 1
  // app.$data.text += 1
}, 1000)

//
// console.log(app.$data)
// console.log(app.$props)
// console.log(app.$el)
// console.log(app.$options)
//
// //下一次有值变化的时候重新渲染的时候， 才会触发 $options.render 的方法
// app.$options.render = (h) => {
//   return h('div', {}, 'new render function')
// }
// console.log(app.$root)
// console.log(app.$root === app)

// 一个组件里面包含了 某些标签，就是作为他的 children 传入的
// console.log(app.$children)

// 插槽 可以通过编程的方式去引用的
// console.log(app.$slots)
// console.log(app.$scopedSlots)

// 模板里的引用
// console.log(app.$refs)

// 是否是服务端（服务端渲染去运行 还是 客户端运行）
// 每个实例都有
// console.log(app.$isServer)

// 监听一个组件，html 修改之后的值（newText） 和 修改之前的值（oldText）
// const unWatch = app.$watch('text', (newText, oldText) => {
//   console.log(`${newText} : ${oldText}`)
// })
// // unwatch 注销掉组件用的
// setTimeout(() => {
//   unWatch()
// }, 2000)

// 监听在app对象上面的 test事件
// app.$on('test', (a,b,c,d,e,f,g) => {
//   console.log(`test emited ${a} ${b} ${c} ${d} ${e} ${f} ${g}`)
// })
//
// // $emit 触发事件
// app.$emit('test', 1,2,3,4,5,6,7)


// 与on相似 只触发一次，虽然使用了循环 setInterval 但是实际上只触发一次
// app.$once('test', (a, b) => {
//   console.log(`test emited ${b} ${a}`)
// })
//
// setInterval(() => {
//   app.$emit('test', 1, 2)
// }, 1000)


// 强制组件重新渲染一次
// 不推荐，影响应用性能
// app.$forceUpdate()


// 通过异步队列方式
// 在下一次更新循环后执行
// app.$nextTick()
